<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('myDaily.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" label-width="120px" style="padding: 0 20px">
        <el-row>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('myDaily.time')}}</div>
              <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="time" type="daterange" range-separator="-" :start-placeholder="$t('myDaily.placeholder.startTime')" :end-placeholder="$t('myDaily.placeholder.endTime')"></el-date-picker>
            </div>
          </el-col>
          <el-col :span="6" style="margin-top: 33px">
            <el-button class="yt-btn-ys" type="primary" @click="handleFilter">{{$t('myDaily.query')}}</el-button>
            <el-button class="yt-btn" type="primary" @click="reset">{{$t('myDaily.reset')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <div class="list-content">
        <span>{{$t('myDaily.myDailyList')}}</span>
      </div>
      <div class="list-operation">
        <!--新增-->
        <el-button class="yt-btn-ys" type="primary" @click="add">{{$t('myDaily.add')}}</el-button>
      </div>
      <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" max-height="600">
        <el-table-column type="selection" align="center" prop="id" width="60"/>
        <el-table-column type="index" align="center" :label="$t('myDaily.index')" width="60"/>
        <el-table-column align="center" :label="$t('myDaily.dayOfWeek')" prop="dayOfWeek" >
          <template slot-scope="scope">
            <div style="text-decoration: underline;color: #6dcaa8;cursor: pointer;" @click="handlePreserve(scope.row)">{{ scope.row.week }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('myDaily.dailyDate')" prop="dailyDate">
          <template slot-scope="scope">
            <div style="text-decoration: underline;color: #6dcaa8;cursor: pointer;"  @click="handlePreserve(scope.row)">{{ scope.row.dailyDate }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('myDaily.hrs')" prop="hrs"/>
        <el-table-column align="center" :label="$t('myDaily.statusName')" prop="statusName"/>
        <el-table-column align="center" :label="$t('myDaily.createName')" prop="createName"/>
        <el-table-column align="center" :label="$t('myDaily.createTime')" prop="updateTime"/>
      </el-table>
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page.sync="listQuery.page"
        :page-sizes="[10, 20, 30, 50, 100, 200]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { myDailyReport } from '@/api/dailyAdministrator/myDaily';
  import formatter from '@/utils/formatter';
  export default {
    name: 'myDaily',
    data() {
      return {
        formatter,
        statusName: this.$store.getters.allMapDic.dailyStatus,
        listQuery: {
          order: 'desc', // 降序（desc）/升序（asc）
          orderBy: 'update_time', // 排序字段
          page: 1,
          limit: 10,
          startTime: '',
          endTime: ''
        },
        time: [],
        list: [],
        total: 0
      };
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        this.listQuery.startTime = this.time[0];
        this.listQuery.endTime = this.time[1];
        myDailyReport(this.listQuery).then(res => {
          this.list = res.data.data.rows
          this.list.forEach(x => {
            x.statusName = this.statusName[x.status]
          })
          this.total = res.data.data.total
        });
      },
      handleFilter() {
        this.getData();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getData();
      },
      reset() {
        // 重置函数
        this.listQuery = {};
        this.time = [];
        this.getData();
      },
      add() {
        this.$router.push({ path: '/dailyManagement/myDailyDetails', query: { status: '0' } })
      },
      handlePreserve(row) {
        // 编辑界面会再查status。这里先传默认值
        this.$router.push({ path: '/dailyManagement/myDailyDetails', query: { id: row.id, status: '0' } })
      }
    }
  };
</script>
<style scoped>
</style>
